
import { useIntersectionObserver } from '@vueuse/core'

//定义懒加载插件
export const LazyPlugin={
    install(app){
        //懒加载指令逻辑
        //定义全局指令
     app.directive('img-lazy',{
    mounted(el,binding){
        //el:指令绑定的那个元素
        //binding:binding.value指令等于号后面绑定的表达式的值,图片url
        // console.log(el,binding.value)
      const {stop} = useIntersectionObserver(
           el,
            ([{ isIntersecting }]) => {
                // console.log(isIntersecting)
                if(isIntersecting){
                    //进入了视口区域
                    el.src=binding.value
                    //防止重复监听
                    stop()
                }
              
            },
          )
     }
  })

 }
}